<div id="PrePurchaseOrderList" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" style=" height:100%;margin: 0px;padding: 0px;">
    <div id="bodyFrame"  xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
        <div id="topBody">
            <div class="row rowSet" style="border-bottom: 1px solid gainsboro;">
                <nav class="navbar " role="navigation" style="margin: 0px;padding: 0px;border-radius: 0px;background-color: rgb(240,240,240)">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">{{title}}</a>
                    </div>
                    <div>
                        <ul class="nav navbar-nav navbar-right" style="margin: 0px;padding: 5px">
                            <li><a href="#"> 审核人:{{checkUser}}</a></li>
                            <li><button href="#" :class="['btn','btn-default',{'active':queryFlag}]" style="margin-right: 10px" @click="querySwitch()">查询</button></li>
                            <!--动态调整列显示-->
                            <li class="dropdown">
                                <button  class="dropdown-toggle btn btn-default" data-toggle="dropdown">列<b class="caret"></b></button>
                                <ul class="dropdown-menu autoDiv">
                                    <li v-for='item in initListPageDto.columnItemDtoList'>
                                        <a href="#"> <input type="checkbox" v-model="item.showFlag" />{{item.title}}</a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                </nav>
            </div><!-- /.row -->
            <div class="row rowSet" style="padding: 10px 0px 0px 0px;" v-show="queryFlag">
                <!--查询条件-->
                <template v-for="(item, index) in initListPageDto.queryItemDtoList" >
                    <div class="form-group col-sm-3" style="margin-bottom: 5px;">
                        <label v-bind:for="'inputFile'+index" class="col-sm-4 control-label" style="text-align: right;padding-right: 5px;">{{item.title}}:</label>
                        <div class="col-sm-8" v-if="item.type == 2">
                            <!-- 渲染字典列表 -->
                            <select   v-model="requestDto[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
                                <option value="null" selected>全部</option>
                                <template v-for="dictItem in initListPageDto.dict[item.dictCodeType].list" >
                                    <option v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
                                </template>
                            </select>
                        </div>
                        <!--日期-->
                        <div class="col-sm-8"  v-if="item.type == 3" >
                            <input type="date"  v-model="requestDto[item.fieldName]"   class="form-control" v-bind:id="'inputFile'+index" />
                        </div>
                        <!--普通控件-->
                        <div class="col-sm-8" v-if="item.type == 0">
                            <input type="text"  v-model="requestDto[item.fieldName]"   class="form-control" v-bind:id="'inputFile'+index" />
                        </div>
                    </div>
                </template>
                <div class="form-group col-sm-12" align="right" style="margin-bottom: 5px;">
                    <button type="button" v-on:click="queryClick" class="btn btn-primary ">查询</button>
                </div>
            </div><!-- /.row -->
        </div>

        <div id="centerBody" class="panel panel-default">
            <div class="panel panel-default" style="margin: 0px;padding: 0px;border: 0px">
                <!--列表渲染-->
                <table class="table table-condensed" style="margin: 0px;padding: 0px;">
                    <thead>
                    <tr>
                        <template v-for='item in initListPageDto.columnItemDtoList'>
                            <th v-show="item.showFlag == true">{{item.title}}</th>
                        </template>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in responseDtoList">
                        <template v-for='it in initListPageDto.columnItemDtoList'>
                            <td v-show='it.showFlag == true'>
                                <!--普通-->
                                <template v-if="it.type == 0" >
                                    {{item[it.fieldName]}}
                                </template>
                                <!--图片-->
                                <img v-if="it.type == 1" :src="$ImageUrl(item[it.fieldName],'small')"   class="img-thumbnail"  width="30px"/>
                                <!--字典 翻译-->
                                <template v-if="it.type == 2" >
                                    {{initListPageDto.dict[it.dictCodeType].map[item[it.fieldName]]}}
                                </template>
                                <!--日期-->
                                <template v-if="it.type == 3" >
                                    {{$formatDate('yyyy-MM-dd hh:mm:ss',item[it.fieldName])}}
                                </template>
                                <!--链接类型-->
                                <template v-if="it.type == 5" >
                                    <button class="btn btn-link" @click="linkClick(item,index)">{{item[it.fieldName]}}</button>
                                </template>
                            </td>
                        </template>
                        <td>
                            <button type="button" class="btn btn-link" v-on:click="check(item,2)" v-if="item.checkState == 1">审核通过</button>
                            <button type="button" class="btn btn-link" v-on:click="check(item,3)" v-if="item.checkState == 1">审核不通过</button>
                            <button type="button" class="btn btn-link" v-on:click="check(item,4)" v-if="item.checkState == 1">下发修改</button>
                            <template v-for="name in lineEvent" >
                                <button type="button" class="btn btn-link" v-on:click="event(item,name)">{{name}}</button>
                            </template>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div  id="bottomBody" style="padding-top: 5px;padding-left: 15px">
            <!--加载分页-->
            <ul class="pagination" style="margin: 0px">
                <li :class="pageNo == 1 ? 'disabled' : '' ">
                    <a href="#" v-on:click="pageClick(pageNo-1)">&laquo;</a>
                </li>
                <li v-for="i in pageLength" :class="pageNo == i ? 'active' : '' ">
                    <a href="#"  v-on:click="pageClick(i)">{{i}}</a>
                </li>
                <li :class="pageNo == pageLength ? 'disabled' : '' ">
                    <a href="#"  v-on:click="pageClick(pageNo+1)">&raquo;</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="showInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true">
        <div class="modal-dialog" style="width: 70%;">
            <div class="modal-content" >
                <div id="showInfoModalContent" class="modal-body" style="padding: 0px;">
                    <!--动态加载内容-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 审核模态框（Modal） -->
    <div class="modal fade" id="checkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  >
        <div class="modal-dialog" style="width: 30%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 align="center">订单[{{selectItem.orderNo}}]审核意见:</h4>
                </div>
                <div class="modal-body" style="padding: 0px">
                    <input   type="text" class="form-control" v-model="checkRemark" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="saveSelect()" data-dismiss="modal">保存更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
    $(document).ready(function(){
        //采用vue
        var PrePurchaseOrderList=new Vue({
            el: '#PrePurchaseOrderList',
            data: {
                title:'采购预订单',
                initUrl : '/pageInit/getInitListPageDto/PrePurchaseOrder',
                lineEvent : [],
                queryFlag : false,
                initListPageDto : {},
                //查询请求的对象
                requestDto:{
                    checkState:1
                },
                //返回的对象列表
                responseDtoList:[],
                pageNo:1,    //当前页码
                limit:10,    //每页条数
                pageLength:0, //总页数
                isSend:false, //分页查询的点击状态
                selectItem:{},
                checkRemark:null,
                checkState:null,
                checkUser:mainIndex.userEmployee.name,
                checkUserCode:mainIndex.userEmployee.workNo,
            },
            methods: {
                init:function () {
                    var that = this;
                    this.$send(Vue.prototype.getUrl(this.initUrl),null,function(data){
                        that.initListPageDto = data;
                        that.query();
                    });
                },
                //切换查询标志
                querySwitch: function () {
                    this.queryFlag = !this.queryFlag;
                    setTimeout(function() {
                        console.log('刷新框架');
                        reSizeBodyFrame();
                    },50);
                },
                /***/
                check:function(item,state){
                    this.selectItem = item;
                    this.checkState = state;
                    this.checkRemark = item.checkRemark;
                    //显示控件
                    $('#checkModal').modal();
                },
                /**保存更改*/
                saveSelect: function () {
                    //TODO 调后台更新
                    this.selectItem.checkRemark =this.checkRemark;
                    this.selectItem.checkState =this.checkState;
                    this.selectItem.checkUser = this.checkUser;
                    this.selectItem.checkUserCode = this.checkUserCode;
                    var that = this;
                    this.$send('/business/purchase/pre/check',this.selectItem,function(data){
                        alert('审核成功!');
                        that.query();
                    });

                },
                /**点击链接*/
                linkClick:function(item,index){
                    //页面传参给infoId
                    sessionStorage.infoId=item.id;
                    //加载model
                    $('#showInfoModalContent').load(Vue.prototype.getUrl('/show/page/business/purchase/PrePurchaseOrderInfo'));
                    $('#showInfoModal').modal();
                },
                //点击查询按钮时候
                queryClick:function(){
                    this.pageNo =1;
                    this.query();
                },
                //点击查询按钮时候
                query:function(){
                    //对空字符串进行处理
                    for(var key in this.requestDto) {
                        if (this.requestDto[key] == 'null'){
                            this.requestDto[key] = null;
                        }
                    }
                    console.log('query start!! ');
                    var that = this;
                    var url = Vue.prototype.getUrl(this.initListPageDto.queryUrl) + '?pageNo='+this.pageNo+'&limit='+this.limit;
                    console.log(JSON.stringify(this.requestDto));
                    this.$send(url,this.requestDto,function(data){
                        console.log('查询成功！！');
                        that.responseDtoList = data.dataList;
                        that.pageLength = data.pageLength;
                    });
                },
                //点击其他按钮时
                event:function (item,name) {
                    console.log('父组件!');
                },
                /**
                 * 当控件触发按钮时
                 */
                pageClick: function (i) {
                    this.setNowPageNo(i);
                    //触发引用的控件的方法
                    if(this.isSend){
                        this.isSend =false; //清除状态
                        this.query();
                    }
                },
                /**
                 * 根据点击的序号更新页码
                 * @param i
                 */
                setNowPageNo:function(i){
                    if(i<1){
                        i=1;
                    }else if(i>this.pageLength){
                        i = this.pageLength;

                    }else if(i != this.pageNo){
                        this.isSend = true;
                    }
                    this.pageNo  = i ; // 设置当前页号
                },
            },
            created: function () {
                this.init();
            },
            mounted: function () {

            },
        });

    });

</script>
